import { Button, Avatar } from 'antd'
import { useSelector } from 'react-redux'
import { StoreType, UserInfoType } from '../interface'
import { useNavigate } from 'react-router-dom'


const Header = () => {

    const navigate = useNavigate();

    const userInfo = useSelector((state: StoreType) => {
        // 断言 返回值 必须是一个 UserInfoType 类型
        return state.userInfo as UserInfoType
    })

    const toHome = () => {
        navigate('/main')
    }

    const toMyDetail = () => {
        navigate('/my')
    }

    const toEdit = () => {
        navigate('/edit')
    }

    return <div className="header">
        <Button type="link" onClick={toHome}> 博客 </Button>
        <div onClick={toMyDetail}>
            <Avatar src={userInfo.img} style={{ width: "50px", height: "50px", borderRadius: "50%", marginRight: "20px" }} />
        </div>
        <Button type="primary" onClick={toEdit}>创作</Button>
    </div>
}

export default Header